import React    from 'react';
import ReactDOM from 'react-dom';
import pickerDateRange  from './dateRange.js';
import $  from 'jquery';
import  './dateRange.scss';



class MyDateRange extends React.Component {
   static propTypes={
        onscallback:React.PropTypes.func
    };

  constructor(props) {
              super(props);

              let today = new Date();
              let month = today.getMonth()+1;
              let todaystr= today.getFullYear() + "-" + (month>10?month:"0"+month) + "-" + today.getDate();
              this.state = {
                    startDate: todaystr,
                    endDate: todaystr,
                    triggerId: 'trigger' + (new Date()).getTime(),
                    titleId: "title" + (new Date()).getTime(),

              };
          }

  componentWillMount() {
      setTimeout(this.initDateRange.bind(this), 0);
  }

  initDateRange(){
     let that =this;
      let options={
          isTodayValid: true,
          startDate: this.state.startDate,
          endDate: this.state.endDate,
          defaultText: ' 至 ',
          stopToday: false,
          inputTrigger: this.state.triggerId,
          success: (json)=>{
              that.props.onscallback(json);
          }
        }

      this.DateRange = new pickerDateRange(this.state.titleId, options);
  }

   render() {
        return (
            <div className="ta_date" >
            <span className="date_title" id={this.state.titleId}>{ this.state.startDate } 至 { this.state.endDate }</span>
            <a className="opt_sel" href="javascript:void(0)" id={this.state.triggerId}>
                <i className="i_orderd"></i>
            </a>
        </div>
        )
    }
}

export default MyDateRange;
